﻿<h1 class="page-header" ng-if="transaction.id" page-header="Edit transaction">Edit transaction</h1>
<h1 class="page-header" ng-if="!transaction.id" page-header="Add transaction">Add transaction</h1>

<form class="form-horizontal" novalidate>
    <fieldset>
        <legend class="well well-sm">Basic information</legend>
        <div class="form-group">
            <div class="col-sm-6">
                <label for="location">Location</label>
                <select id="location" class="form-control" ng-model="transaction.locationId"  data-placeholder="Pick a number"><!--ui-select2-->
                    <option ng-repeat="item in locations" value="{{item.id}}" ng-selected="item.id == transaction.locationId">{{item.name}}</option>
                </select>
            </div>
            <div class="col-sm-6">
                <label for="status">Status</label>
                <select id="status" class="form-control" ng-model="transaction.statusId" class="form-control">
                    <option ng-repeat="item in status" value="{{item.id}}" ng-selected="item.id == transaction.statusId">{{item.name}}</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-6">
                <label for="name">Transaction name</label>
                <input type="text" class="form-control" id="name" ng-model="transaction.name" required>
            </div>
            <div class="col-sm-6">
                <label for="mls">MLS</label>
                <input type="text" class="form-control" id="mls" ng-model="transaction.transactionNo">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-6">
                <label for="closeDate">Close date</label>
                <input type="text" id="closeDate" class="form-control" data-min-date="today"
                       bs-datepicker ng-model="transaction.closeDate" />
            </div>
        </div>
    </fieldset>

    <fieldset class="spacing-bottom-md">
        <legend class="well well-sm" ng-click="isCollapsed = !isCollapsed" ng-init="isCollapsed = true">
            Buyer, Seller, Pricing, etc...
            <b class="glyphicon glyphicon-chevron-down pull-right" ng-class="{'is-collapsed' : isCollapsed}"></b>
        </legend>
        <div collapse="isCollapsed">
            <div class="form-group">
                <div class="col-sm-12">
                    <label for="closeDate">More info</label>
                    <textarea class="form-control" ng-model="transaction.moreInfo"></textarea>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-6">
                    <label for="aedate">Automatic expiration date</label>
                    <input type="text" id="aedate" class="form-control" data-min-date="today" bs-datepicker
                           ng-model="transaction.expiredDate" />
                </div>
                <div class="col-sm-6">
                    <label for="adate">Acceptance date</label>
                    <input type="text" id="adate" class="form-control" data-min-date="today" bs-datepicker
                           ng-model="transaction.acceptanceDate" />
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-6">
                    <label for="buyer">Buyer</label>
                    <input type="text" class="form-control" id="buyer" ng-model="transaction.buyerName">
                </div>
                <div class="col-sm-6">
                    <label for="seller">Seller</label>
                    <input type="text" class="form-control" id="seller" ng-model="transaction.sellerName">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-6">
                    <label for="lPrice">List price</label>
                    <input type="number" class="form-control" id="lPrice" ng-model="transaction.listPrice">
                </div>
                <div class="col-sm-6">
                    <label for="sPrice">Sell price</label>
                    <input type="number" class="form-control" id="sPrice" ng-model="transaction.sellPrice">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-6">
                    <label for="totalCommission">Total commision</label>
                    <input type="text" class="form-control" id="totalCommission" ng-model="transaction.totalCommission">
                </div>
                <div class="col-sm-6">
                    <label for="summaryCommission">Commision summary</label>
                    <input type="text" class="form-control" id="summaryCommission" ng-model="transaction.commissionSummary">
                </div>
            </div>
        </div>
    </fieldset>

    <div class="form-group">
        <div class="col-sm-4">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Listing</th>
                        <th>Selling</th>
                        <th class="col-sm-12">Agent</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in agents">
                        <td class="text-center"><input type="checkbox" ng-model="item.listing" /></td>
                        <td class="text-center"><input type="checkbox" ng-model="item.selling" /></td>
                        <td>{{item.name}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div ng-click="hasOutsideAgents = !hasOutsideAgents" class="spacing-bottom-sm"><input ng-model="hasOutsideAgents" type="checkbox"> This transaction has outside (co-op) agents</div>
    <div class="form-group" collapse="!hasOutsideAgents">
        <div class="col-sm-6">
            <label for="olAgent">Outside listing agent</label>
            <input type="text" class="form-control" id="olAgent" ng-model="transaction.outsideListingAgent">
        </div>
        <div class="col-sm-6">
            <label for="osAgent">Outside selling agent</label>
            <input type="text" class="form-control" id="osAgent" ng-model="transaction.outsideSellingAgent">
        </div>
    </div>
    <div class="form-group spacing-top-md">
        <button class="btn btn-info" ng-if="!transaction.id" busy-click="addTransaction(transaction)">Add transaction</button>
        <button class="btn btn-info" ng-if="transaction.id" busy-click="updateTransaction(transaction)">Update transaction</button>
    </div>
</form>
